@import "../../themes/ionic.globals";

// Back Button
// --------------------------------------------------

.back-button {
  display: none;
}

.can-go-back > ion-header .back-button,
.back-button.show-back-button {
  display: inline-block;
}

.back-button button {
  @include font-smoothing();
  @include text-align(center);
  @include appearance(none);

  position: relative;
  z-index: 0;
  display: flex;

  flex-flow: row nowrap;
  flex-shrink: 0;

  align-items: center;
  justify-content: center;

  border: 0;
  outline: none;

  line-height: 1;

  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: none;

  white-space: nowrap;
  cursor: pointer;

  vertical-align: top; // the better option for most scenarios
  vertical-align: -webkit-baseline-middle; // the best for those that support it

  transition: background-color, opacity 100ms linear;

  user-select: none;
  font-kerning: none;
}

.back-button .button-inner {
  display: flex;

  flex-flow: row nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

.back-button-text {
  display: flex;

  align-items: center;
}
